<script setup>
import { reactive, ref } from 'vue'
import { getCodeApi, registerAccountApi, checkPhoneRegisterApi } from '@/apis/login.js'
import { ElMessage } from 'element-plus'

// 表单
const form = reactive({
  nickname: '',
  phone: '',
  validateCode: '',
  password1: '',
  password2: ''
})

// 验证规则
const rules = reactive({
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 4, max: 18, message: '请输入 4 - 18 位字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入 11 位手机号', trigger: 'blur' }
  ],
  validateCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '请输入 4 位验证码', trigger: 'blur' }
  ],
  password1: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '请输入 6 - 18 位字符', trigger: 'blur' }
  ],
  password2: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '请输入 6 - 18 位字符', trigger: 'blur' }
  ]
})

// 自定义错误提示
const userError = reactive({
  password: ''
})

const isCodeDisabled = ref(false)
const timer = ref(null)
const countDown = ref(60)
const ruleFormRef = ref(null)
// 获取验证码
const getCode = (mode = 'register') => {
  ruleFormRef.value.validateField('phone', async (valid) => {
    if (!valid) return
    // 检测手机号是否已注册
    if (mode === 'register') {
      const checkPhone = await checkPhoneRegisterApi({
        phone: form.phone
      })
      if (checkPhone.data.exist === 1) return ElMessage.error('该手机号已注册')
    }
    // 未注册，向手机号发送验证码
    isCodeDisabled.value = true
    const { data } = await getCodeApi(form.phone)
    if (data.code === 200) {
      // 倒计时
      countDown.value = 60
      timer.value = setInterval(() => {
        countDown.value -= 1
        if (countDown.value === 0) {
          clearInterval(timer.value)
          isCodeDisabled.value = false
        }
      }, 1000)
      ElMessage.message('验证码发送成功')
    } else {
      ElMessage('验证码发送失败')
    }
  })
}

/* 注册网易云账号 */
const handleRegister = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (form.password1 !== form.password2) return userError.password = '密码不一致'
    if (valid) {
      userError.password = ''
      const { data } = await registerAccountApi({
        nickname: form.nickname,
        phone: form.phone,
        captcha: form.validateCode,
        password: form.password2
      })
      // 通过验证，进行后续操作
      if (data.code === 200) {
        ElMessage.success('注册成功')
      } else {
        ElMessage.error('注册失败')
      }
    }
  })
}

// 修改密码
const isRegister = ref(true)
const handleResetPwd = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (form.password1 !== form.password2) return userError.password = '密码不一致'
    if (valid) {
      userError.password = ''
      const { data } = await registerAccountApi({
        phone: form.phone,
        captcha: form.validateCode,
        password: form.password2
      })
      // 通过验证，进行后续操作
      if (data.code === 200) {
        ElMessage.success('修改成功')
      } else {
        ElMessage.error('修改失败')
      }
    }
  })
}

</script>

<template>
  <div class="register-account">
    <!-- 注册网易云 -->
    <template v-if="isRegister">
      <el-form ref="ruleFormRef" :model="form" label-width="120px" :rules="rules" class="register-input">
        <div>
          <el-form-item prop="nickname">
            <input type="text" v-model="form.nickname" placeholder="请输入昵称" maxlength="18" />
          </el-form-item>
          <el-form-item prop="phone">
            <input type="text" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
          <div class="validate-box">
            <el-form-item prop="validateCode">
              <input type="text" v-model="form.validateCode" placeholder="验证码" class="validate-input" maxlength="4" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isCodeDisabled" @click="getCode">
                {{ isCodeDisabled ? countDown + '秒后重新发送' : '发送验证码' }}
              </el-button>
            </el-form-item>
          </div>
          <el-form-item prop="password1" :error="userError.password">
            <input type="password" v-model="form.password1" placeholder="请输入密码" maxlength="18" />
          </el-form-item>
          <el-form-item prop="password2" :error="userError.password">
            <input type="password" v-model="form.password2" placeholder="确认密码" maxlength="18" />
          </el-form-item>
        </div>
      </el-form>
      <div class="register-button">
        <el-button type="primary" @click="handleRegister">注册</el-button>
      </div>
      <p @click="isRegister = false">忘记密码？</p>
    </template>
    <!-- 注册网易云 -->

    <!-- 修改密码 -->
    <template v-if="!isRegister">
      <el-form ref="ruleFormRef" :model="form" label-width="120px" :rules="rules" class="register-input">
        <div>
          <el-form-item prop="phone">
            <input type="text" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
          <div class="validate-box">
            <el-form-item prop="validateCode">
              <input type="text" v-model="form.validateCode" placeholder="验证码" class="validate-input" maxlength="4" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isCodeDisabled" @click="getCode('reset')">
                {{ isCodeDisabled ? countDown + '秒后重新发送' : '发送验证码' }}
              </el-button>
            </el-form-item>
          </div>
          <el-form-item prop="password1" :error="userError.password">
            <input type="password" v-model="form.password1" placeholder="请输入密码" maxlength="18" />
          </el-form-item>
          <el-form-item prop="password2" :error="userError.password">
            <input type="password" v-model="form.password2" placeholder="确认密码" maxlength="18" />
          </el-form-item>
        </div>
      </el-form>
      <div class="register-button">
        <el-button type="primary" @click="handleResetPwd">修改密码</el-button>
      </div>
      <p @click="isRegister = true">去注册</p>
    </template>
    <!-- / 修改密码 -->
  </div>
</template>

<style scoped lang='scss'>
.register-account {
  margin-top: 30px;
  padding: 0px 40px;

  .register-input {
    display: flex;
    justify-content: center;

    input {
      margin-bottom: 10px;
      height: 45px;
      width: 320px;
      outline: none;
      background: transparent;
      border-bottom: 1px solid #666;
      font-size: 17px;
      letter-spacing: 1px;

      &::placeholder {
        color: #666;
      }
    }

    .validate-box {
      display: flex;

      .validate-input {
        width: 170px;
      }

      button {
        margin-left: 30px;
        width: 120px;
      }
    }
  }

  .register-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .el-button {
      height: 44px;
      width: 320px;
      border-radius: 22px;
      font-weight: bold;
      font-size: 16px;
    }
  }

  p {
    text-align: center;
    margin-top: 25px;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
  }

}

:deep(.el-form-item__content) {
  margin-left: 0px !important;
}
</style>
